import React, { useState, useEffect } from 'react';
import {
    View, Text, Toast, ScrollView, Image,
    TouchableOpacity, Modal as ModalRN, TextInput,
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import PropTypes from 'prop-types';
import {
    WingBlank, WhiteSpace, Button,
} from '@ant-design/react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import moment from 'moment';
import { compDetail, addMark } from '../../../../comconfig/sqlfun';
import styles from './styles';
import { debounce } from '../../../../utils/common';

const Detail = ({ navigation, route }) => {
    const { planId } = route.params;
    const [imgUri, setImgUri] = useState([]);
    const [images, setImages] = useState([]);
    const [visible, setVisible] = useState(false);
    const [viewPage, setViewPage] = useState(0);
    const [info, setInfo] = useState('');
    const [textVal, onChangeTextVal] = useState('');
    const getDetail = async (id) => {
        try {
            const list = await compDetail(id);
            setInfo(JSON.parse(list));
        } catch (error) {
            Toast.info('获取数据失败', 1, undefined, false);
        }
    };
    useEffect(() => {
        getDetail(planId);
    }, []);
    useEffect(() => {
        onChangeTextVal(info.note);
        const copyImgUri = [...imgUri];
        const copyImages = [...images];
        if (info.img1uri !== undefined) {
            copyImgUri.push(info.img1uri);
            copyImages.push({ url: info.img1uri });
        }
        if (info.img2uri !== undefined) {
            copyImgUri.push(info.img2uri);
            copyImages.push({ url: info.img2uri });
        }
        if (copyImgUri[0] !== null) {
            setImgUri(copyImgUri);
            setImages(copyImages);
        }
    }, [info]);
    navigation.setOptions({
        title: info.title,
        headerTitleStyle: {
            color: '#017BFF',
        },
        headerRight: () => (
            <TouchableOpacity
                onPress={() => debounce(() => {
                    addMark(textVal, parseInt(info.planid, 10));
                })}
            >
                <AntDesign
                    name="form"
                    size={26}
                    color="#017BFF"
                    style={{ marginRight: 5 }}
                />
            </TouchableOpacity>
        ),
    });
    return (
        <View>
            <ScrollView>
                <WingBlank>
                    <WhiteSpace />
                    <Text style={styles.describe}>任务描述</Text>
                    <WhiteSpace />
                    <View style={{ backgroundColor: '#FFFFFF', padding: 10, borderRadius: 5 }}>
                        <Text style={styles.context}>{info.detail}</Text>
                        <WhiteSpace />
                        <View style={{
                            flexDirection: 'row',
                            flexWrap: 'wrap',
                        }}
                        >
                            {
                                imgUri.length === 0 ? null : imgUri.map((uri, i) => (

                                    <TouchableOpacity
                                        key={uri}
                                        onPress={() => {
                                            setVisible(true); setViewPage(i);
                                        }}
                                        style={{ marginBottom: 10 }}
                                    >
                                        <Image
                                            style={styles.image}
                                            // resizeMethod
                                            resizeMode="contain"
                                            source={{
                                                uri,
                                            }}
                                            defaultSource={
                                                require('../../../../assets/images/notfound.jpeg')
                                            }
                                        />
                                    </TouchableOpacity>
                                ))
                            }
                        </View>
                    </View>
                    <WhiteSpace />
                    <Text style={styles.describe}>工作详情</Text>
                    <WhiteSpace />
                    <View>
                        <View style={styles.workdetial}>
                            <AntDesign
                                name="calendar"
                                size={25}
                                color="#017BFF"
                                style={{ marginRight: 5 }}
                            />
                            <Text style={styles.context}>
                                {moment(info.startTime).format('YY-MM-DD')}
                            </Text>
                            <Text style={{ color: '#017BFF', fontSize: 18 }}> ~ </Text>
                            <Text style={styles.context}>
                                {moment(info.planTime).format('YY-MM-DD')}
                            </Text>
                        </View>
                        <View style={styles.workdetial}>
                            <AntDesign
                                name="clockcircleo"
                                size={25}
                                color="#017BFF"
                                style={{ marginRight: 5 }}
                            />
                            <Text style={styles.context}>
                                {'耗时: '}
                            </Text>
                            <Text style={{ fontSize: 18, color: '#017BFF' }}>
                                {info.actuallyWorkTime}
                            </Text>
                            <Text style={styles.context}>
                                {' 小时'}
                            </Text>
                        </View>
                    </View>
                    <WhiteSpace />
                    <Text style={styles.describe}>备注</Text>
                    <WhiteSpace />
                    <TextInput
                        multiline
                        placeholder="添加描述..."
                        placeholderTextColor="#5d5d7e"
                        style={styles.textInput}
                        maxLength={200}
                        onChangeText={text => onChangeTextVal(text)}
                        value={textVal}
                        returnKeyLabel="done"
                    />
                </WingBlank>
            </ScrollView>
            <ModalRN visible={visible}>
                <ImageViewer imageUrls={images} index={viewPage} />
                <Button
                    style={{ borderWidth: 0 }}
                    onPress={() => setVisible(false)}
                >
                    取消
                </Button>
            </ModalRN>
        </View>
    );
};
Detail.defaultProps = {
    route: {},
};
Detail.propTypes = {
    route: PropTypes.objectOf(PropTypes.any),
};
export default Detail;
